.fx-date-picker {
  display: inline-block;
}

.fx-date {
  display: inline-block;
  padding: 20px;
  border-radius: $border-radius-default;
  box-shadow: $border-shadow;
  position: fixed;
  background-color: #fff;

  &.to-top {
    transform-origin: bottom center;

    > .fx-date-tip {
      bottom: -5px;
      left: calc(50% - 5px);
      border-bottom-color: $border-color-default;
      border-right-color: $border-color-default;
    }
  }

  &.to-bottom {
    transform-origin: top center;

    > .fx-date-tip {
      top: -5px;
      left: calc(50% - 5px);
      border-top-color: $border-color-default;
      border-left-color: $border-color-default;
    }
  }

  > .fx-date-tip {
    width: 10px;
    height: 10px;
    border: 1px solid transparent;
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
    transform: rotate(45deg);
    background-color: #fff;
  }

  > .fx-date-header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: $font-color-important;

    > span {
      display: inline-block;
      min-width: 20px;
      text-align: center;
      cursor: pointer;
    }

    > .fx-date-time {
      width: 100%;
      display: flex;
      justify-content: center;
      font-weight: bolder;
      font-size: 18px;

      > .year {
        margin-right: 10px;
        cursor: pointer;

        &:hover {
          color: $date-picker-active-background;
        }
      }

      > .month {
        cursor: pointer;

        &:hover {
          color: $date-picker-active-background;
        }
      }
    }
  }

  > .fx-date-main {
    width: calc(42px * 7);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    > li {
      width: 42px;
      height: 38px;
      color: $font-color-lowest;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: default;

      &.fx-date-week {
        width: calc(42px * 7);
        height: 26px;
        border-radius: 16px;
        background-color: $font-color-lowest;
        position: absolute;
        left: 20px;
        z-index: 10;
        transition: top 0.15s;
        opacity: 0.3;
        cursor: pointer;
      }

      &.active {
        span {
          background-color: $date-picker-active-background;
          color: #fff;
        }
      }

      &.fx-date-day {
        cursor: pointer;
      }

      &.title {
        color: $font-color-important;
        font-weight: bolder;
      }

      &.current {
        color: $font-color-default;
        font-weight: 400;
      }

      &.today {
        color: $date-picker-active-background;
      }

      > span {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  > .fx-date-main-year, > .fx-date-main-month {
    width: calc(42px * 7);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    > li {
      width: calc(42px * 7 / 4);
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &.today {
        color: $date-picker-active-background;
      }

      &.active > span {
        background-color: $date-picker-active-background;
        color: $date-picker-active-color;
      }

      > span {
        font-size: 12px;
        display: inline-flex;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
